<template>
  <div>
    <EditDeviceCard
        v-if="addingDevice"
        :init-device="initDevice"
        :save-edit="addDevice"
        @cancel="addingDevice = false"
        @saved="handleSaved()"
        @error="$emit('error', $event)">
    </EditDeviceCard>
    <el-card v-else shadow="hover">
      <div class="add-btn-container" @click="handleAddDevice()">
        <el-button type="text" icon="el-icon-plus" style="font-size: 20px"></el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import DeviceCardEdit from "@/components/new/device-card/DeviceCardEdit";
import EditDeviceCard from "@/components/new/device-card/EditDeviceCard";
export default {
  name: "AddDeviceCard",
  components: {EditDeviceCard, DeviceCardEdit},
  props: {
    addDevice: {
      default: undefined
    },
    initDevice: {
      default: undefined
    }
  },
  data(){
    return {
      addingDevice: false
    }
  },
  methods: {
    handleAddDevice(){
      this.addingDevice = true;
    },
    handleSaved(){
      this.addingDevice = false;
      this.$emit('saved')
    }
  }
}
</script>

<style scoped>
.add-btn-container{
  cursor: pointer;
  height: 260px;
  display: flex;
  justify-content: center;
}
</style>
